import React, { useState, useEffect } from 'react'
import './Job.scss'
import { EnvironmentOutline, EyeOutline,UserOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { getJob } from '../../utils/request'
export default function Job() {
    const [job, setJob] = useState([])
    const navigate = useNavigate()

    useEffect(() => {
        // 获取公司岗位
        getJob().then(res => {
            setJob(res.data.plist)
        })
    }, [])

    return (
        <div className='job'>
            <div className='job-top'>
                <h2>公司岗位</h2>
            </div>
            <div className='job-search'>
                <input type="text" placeholder='开启你梦想的旅途' onClick={() => {
                    navigate("/search")
                }} />
            </div>
            <div className='job-HotCompany'>
                <div className='job-HotCompany-top'>
                    <h3>热门公司</h3>
                    <span onClick={()=>{ navigate("/morehotcompany") }} >更多</span>
                </div>
                <div className='job-HotCompany-bottom'>
                    {
                        job.slice(0, 2).map((item, index) => {
                            return <div className='job-HotCompany-bottom-item' key={item._id} onClick={() => {
                                navigate("/detail?_id=" + item._id)
                            }} >
                                <div className='item-top' >
                                    <img src={`/src/component/ysh/imgs/` + item.companyLogo} alt="" />
                                    <span>{item.companyName}</span>
                                </div>
                                <div className='item-body'>
                                    <h3>{item.postName}</h3>
                                    <span>{item.postSalaryLow}-{item.postSalaryHigh}K</span>
                                </div>
                                <div className='item-bottom'>
                                    <div className='item-bottom-left'>
                                        <div>
                                            <EnvironmentOutline />
                                        </div>
                                        <span>{item.companyAddress}</span>
                                    </div>
                                    <div className='item-bottom-right'>
                                        <div>
                                            <EyeOutline />
                                        </div>
                                        <span>{item.postView}</span>
                                    </div>
                                </div>
                            </div>
                        })
                    }
                </div>
            </div>
            <div className='job-Recommend'>
                <div className='job-Recommend-top'>
                    <h3>为您推荐</h3>
                    <span onClick={()=>{navigate("/morerecommed")}} >更多</span>
                </div>
                <div className='job-Recommend-bottom'>
                    {
                        job.slice(2, 4).map((item, index) => {
                            return <div className='job-Recommend-bottom-item' key={index} onClick={() => {
                                navigate("/detail?_id=" + item._id)
                            }} >
                                <div className='item-top' >
                                    <img src={`/src/component/ysh/imgs/` + item.companyLogo} alt="" />
                                    <span>{item.companyName}</span>
                                </div>
                                <div className='item-body'>
                                    <h3>{item.postName}</h3>
                                    <span>{item.postSalaryLow}-{item.postSalaryHigh}K</span>
                                </div>
                                <div className='item-bottom'>
                                    <div className='item-bottom-left'>
                                        <div>
                                            <EnvironmentOutline />
                                        </div>
                                        <span>{item.companyAddress}</span>
                                    </div>
                                    <div className='item-bottom-right'>
                                        <div>
                                            <EyeOutline />
                                        </div>
                                        <span>{item.postView}</span>
                                    </div>
                                </div>
                            </div>
                        })
                    }
                </div>
            </div>
            <div className='job-Vacancy'>
                <div className='job-Vacancy-top'>
                    <h3>最近空缺职位</h3>
                    <span onClick={()=>{ navigate("/morevacancy") }} >更多</span>
                </div>
                <div className='job-Vacancy-bottom'>
                    {
                        job.slice(2,3).map((item, index) => {
                            return <div key={item._id} className="item" onClick={() => {
                                navigate("/position?_id=" + item._id)
                            }}  >
                                <div className='item-top'>
                                    <div className='item-top-left'>
                                        <img src={`/src/component/ysh/imgs/` + item.companyLogo} alt="" />
                                        <span>{item.companyName}</span>
                                    </div>
                                    <div className='item-top-right'>

                                    </div>
                                </div>
                                <div className='item-body'>
                                    <h3>{item.postName}</h3>
                                    <p>{item.companyAddress}</p>
                                    <span>{item.postDesc}</span>
                                </div>
                                <div className='item-bottom'>
                                    <div className='item-bottom-left'>
                                        <div>
                                            <UserOutline />
                                        </div>
                                        <span>{323}</span>
                                    </div>
                                    <div className='item-bottom-right'>
                                        <div>
                                            <EyeOutline />
                                        </div>
                                        <span>{item.postView}</span>
                                    </div>
                                </div>
                            </div>
                        })
                    }
                </div>
            </div>
        </div>
    )
}